<template>
    <div>
        <div id="app-menu">
            <!-- 预览窗 -->
            <div class="weixin-preview">
                <div class="weixin-bd">
                    <div class="weixin-header">公众号菜单</div>
                    <ul class="weixin-menu" id="weixin-menu">
                        <li v-for="(btn,i) in menu.buttons" :key="i" class="menu-item"
                            :class="{'current':selectedMenuIndex===i&&selectedMenuLevel==1}" @click="selectMenu(i)">
                            <div class="menu-item-title">
                                <span>{{ btn.name }}</span>
                            </div>
                            <ul class="weixin-sub-menu">
                                <li v-for="(sub,i2) in btn.subButtons" :key="i2" class="menu-sub-item"
                                    :class="{'current':selectedMenuIndex===i&&selectedSubMenuIndex===i2&&selectedMenuLevel==2,'on-drag-over':onDragOverMenu==(i+'_'+i2)}"
                                    @click.stop="selectSubMenu(i,i2)" draggable="true" @dragstart="selectSubMenu(i,i2)"
                                    @dragover.prevent="onDragOverMenu=(i+'_'+i2)" @drop="onDrop(i,i2)">
                                    <div class="menu-item-title">
                                        <span>{{ sub.name }}</span>
                                    </div>
                                </li>
                                <li v-if="btn.subButtons.length<5" class="menu-sub-item"
                                    :class="{'on-drag-over':onDragOverMenu==(i+'_'+btn.subButtons.length)}"
                                    @click.stop="addMenu(2,i)"
                                    @dragover.prevent="onDragOverMenu=(i+'_'+btn.subButtons.length)"
                                    @drop="onDrop(i,btn.subButtons.length)">
                                    <div class="menu-item-title">
                                        <i class="el-icon-plus"/>
                                    </div>
                                </li>
                                <i class="menu-arrow arrow_out"/>
                                <i class="menu-arrow arrow_in"/>
                            </ul>
                        </li>
                        <li class="menu-item" v-if="menu.buttons.length<3" @click="addMenu(1)">
                            <i class="el-icon-plus"/>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 菜单编辑器 -->
            <div class="weixin-menu-detail" v-if="selectedMenuLevel > 0">
                <menu-btn-edit
                    :button="selectedButton"
                    :selectedMenuLevel="selectedMenuLevel"
                    @delMenu="delMenu"/>
            </div>
        </div>
        <div class="weixin-btn-group" v-if="isAuth('wx:menu:save')">
            <el-button type="success" icon="el-icon-upload" @click="updateWxMenu">发布</el-button>
            <el-button type="warning" icon="el-icon-delete" @click="delMenu">清空</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'menu',
    components: {
        menuBtnEdit: () => import('@/components/wx/menu/menuBtnEdit')
    },
    data() {
        return {
            menu: {'buttons': []},//当前菜单
            selectedMenuIndex: '',//当前选中菜单索引
            selectedSubMenuIndex: '',//当前选中子菜单索引
            selectedMenuLevel: 0,//选中菜单级别
            selectedButton: '',//选中的菜单按钮
            onDragOverMenu: '' //当前鼠标拖动到的位置
        }
    },
    mounted() {
        this.getWxMenu();
    },
    methods: {
        getWxMenu() {
            this.$http({
                url: this.$http.adornUrl('/manage/wxMenu/getMenu')
            }).then(({data}) => {
                if (data.code === 200) {
                    this.menu = data.data.menu;
                } else {
                    this.$message({
                        type: 'error',
                        message: data.msg
                    });
                }

            });
        },
        //选中主菜单
        selectMenu(i) {
            this.selectedMenuLevel = 1
            this.selectedSubMenuIndex = ''
            this.selectedMenuIndex = i
            this.selectedButton = this.menu.buttons[i]
        },
        //选中子菜单
        selectSubMenu(i, i2) {
            this.selectedMenuLevel = 2
            this.selectedMenuIndex = i
            this.selectedSubMenuIndex = i2
            this.selectedButton = this.menu.buttons[i].subButtons[i2]
        },
        //添加菜单
        addMenu(level, i) {
            if (level == 1 && this.menu.buttons.length < 3) {
                this.menu.buttons.push({
                    "type": "view",
                    "name": "菜单名称",
                    "subButtons": [],
                    "url": ""
                })
                this.selectMenu(this.menu.buttons.length - 1)
            }
            if (level == 2 && this.menu.buttons[i].subButtons.length < 5) {
                this.menu.buttons[i].subButtons.push({
                    "type": "view",
                    "name": "子菜单名称",
                    "url": ""
                })
                this.selectSubMenu(i, this.menu.buttons[i].subButtons.length - 1)
            }
        },
        //删除菜单
        delMenu() {
            if (this.selectedMenuLevel === 1) {
                this.$confirm('删除后菜单下设置的内容将被删除','警告',{type:'warning'})
                    .then(() => {
                        this.menu.buttons.splice(this.selectedMenuIndex, 1);
                        this.unSelectMenu()
                    })
            }else if (this.selectedMenuLevel === 2) {
                this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1);
                this.unSelectMenu()
                this.$message.success('删除成功')
            }
        },
        unSelectMenu() {//不选中任何菜单
            this.selectedMenuLevel = 0
            this.selectedMenuIndex = ''
            this.selectedSubMenuIndex = ''
            this.selectedButton = ''
        },
        updateWxMenu() {
            this.$http({
                url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
                data: this.menu,
                method: 'post'
            }).then(({data}) => {
                if (data.code == 200) {
                    this.$message.success('操作成功')
                } else {
                    this.$message.error(data.msg);
                }

            });
        },
        onDrop(i, i2) {//拖拽移动位置
            this.onDragOverMenu = '';
            if (i == this.selectedMenuIndex && i2 == this.selectedSubMenuIndex) //拖拽到了原位置
                return
            if (i != this.selectedMenuIndex && this.menu.buttons[i].subButtons.length >= 5) {
                this.$message.error('目标组已满');
                return
            }
            this.menu.buttons[i].subButtons.splice(i2, 0, this.selectedButton)
            let delSubIndex = this.selectedSubMenuIndex
            if (i == this.selectedMenuIndex && i2 < this.selectedSubMenuIndex)
                delSubIndex++
            this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1);
            this.unSelectMenu()
        }
    }
}
</script>
<style scoped lang="less">
* {
    box-sizing: border-box;
}

#app-menu {
    overflow: hidden;
    width: 100%;

    ul {
        padding: 0;

        li {
            list-style: none;
        }
    }
}

.weixin-preview {
    position: relative;
    width: 320px;
    height: 540px;
    float: left;
    margin-right: 10px;
    border: 1px solid #e7e7eb;

    a {
        text-decoration: none;
        color: #616161;
    }

    .weixin-hd {
        .weixin-title {
            color: #fff;
            font-size: 15px;
            width: 100%;
            text-align: center;
            position: absolute;
            top: 33px;
            left: 0px;
        }
    }

    .weixin-header {
        text-align: center;
        padding: 10px 0;
        background-color: #616161;
        color: #ffffff;
    }

    .weixin-menu {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #e7e7e7;
        background-position: 0 0;
        background-repeat: no-repeat;
        margin-bottom: 0;
        // 一级
        .menu-item {
            position: relative;
            float: left;
            line-height: 50px;
            height: 50px;
            text-align: center;
            width: 33.33%;
            border-left: 1px solid #e7e7e7;
            cursor: pointer;
            color: #616161;

            :hover {
                color: #000;
            }
        }
    }

    // 二级
    .weixin-sub-menu {
        position: absolute;
        bottom: 60px;
        left: 0;
        right: 0;
        border-top: 1px solid #d0d0d0;
        margin-bottom: 0px;
        background: #fafafa;
        display: block;
        padding: 0;

        .menu-sub-item {
            line-height: 50px;
            height: 50px;
            text-align: center;
            width: 100%;
            border: 1px solid #d0d0d0;
            border-top-width: 0px;
            cursor: pointer;
            position: relative;
            color: #616161;

            :hover {
                background: #eee;
            }
        }

        .menu-sub-item.on-drag-over {
            border-top: 2px solid #44b549;
        }
    }

    .menu-arrow {
        position: absolute;
        left: 50%;
        margin-left: -6px;
    }

    .arrow_in {
        bottom: -4px;
        display: inline-block;
        width: 0px;
        height: 0px;
        border-width: 6px 6px 0px;
        border-style: solid dashed dashed;
        border-color: #fafafa transparent transparent;
    }

    .arrow_out {
        bottom: -5px;
        display: inline-block;
        width: 0px;
        height: 0px;
        border-width: 6px 6px 0px;
        border-style: solid dashed dashed;
        border-color: #d0d0d0 transparent transparent;
    }

    .weixin-sub-menu.show {
        display: block;
    }

    .icon_menu_dot {
        /* background: url(../images/index_z354723.png) 0px -36px no-repeat; */
        width: 7px;
        height: 7px;
        vertical-align: middle;
        display: inline-block;
        margin-right: 2px;
        margin-top: -2px;
    }

    .icon14_menu_add {
        /* background: url(../images/index_z354723.png) 0px 0px no-repeat; */
        width: 14px;
        height: 14px;
        vertical-align: middle;
        display: inline-block;
        margin-top: -2px;
    }

    li {
        :hover {
            .icon14_menu_add {
                /* background: url(../images/index_z354723.png) 0px -18px no-repeat; */
            }
        }

        .current {
            :hover {
                background: #fff;
                color: #44b549;
            }
        }
    }

    .menu-item .menu-item-title, .menu-sub-item .menu-item-title {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }

    .menu-item.current, .menu-sub-item.current {
        border: 1px solid #44b549;
        background: #fff;
        color: #44b549;
    }
}

/*菜单内容*/
.weixin-menu-detail {
    width: 600px;
    padding: 0px 20px 5px;
    background-color: #f4f5f9;
    border: 1px solid #e7e7eb;
    float: left;
    min-height: 540px;

    .menu-name {
        float: left;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
    }

    .menu-del {
        float: right;
        height: 40px;
        line-height: 40px;
        color: #459ae9;
        cursor: pointer;
    }

    .menu-input-group {
        width: 540px;
        margin: 10px 0 30px 0;
        overflow: hidden;
    }

    .menu-label {
        float: left;
        height: 30px;
        line-height: 30px;
        width: 80px;
        text-align: right;
    }

    .menu-input {
        float: left;
        width: 380px;

        .menu-tips {
            margin: 0 0 0 10px;
        }
    }

    .menu-input-text {
        border: 0px;
        outline: 0px;
        background: #fff;
        width: 300px;
        padding: 5px 0px 5px 0px;
        margin-left: 10px;
        text-indent: 10px;
        height: 35px;
    }

    .menu-tips {
        color: #8d8d8d;
        padding-top: 4px;
        margin: 0;
    }

    .menu-tips.cursor {
        color: #459ae9;
        cursor: pointer;
    }

    .menu-content {
        padding: 16px 20px;
        border: 1px solid #e7e7eb;
        background-color: #fff;

        .menu-input-group {
            margin: 0px 0 10px 0;
        }

        .menu-label {
            text-align: left;
            width: 100px;
        }

        .menu-input-text {
            border: 1px solid #e7e7eb;
        }

        .menu-tips {
            padding-bottom: 10px;
        }
    }

    .menu-msg-content {
        padding: 0;
        border: 1px solid #e7e7eb;
        background-color: #fff;

        .menu-msg-head {
            overflow: hidden;
            border-bottom: 1px solid #e7e7eb;
            line-height: 38px;
            height: 38px;
            padding: 0 20px;
        }

        .menu-msg-panel {
            padding: 30px 50px;
        }

        .menu-msg-select {
            padding: 40px 20px;
            border: 2px dotted #d9dadc;
            text-align: center;

            :hover {
                border-color: #b3b3b3;
            }
        }

        strong {
            display: block;
            padding-top: 3px;
            font-weight: 400;
            font-style: normal;
        }

        .menu-msg-title {
            float: left;
            width: 310px;
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.icon36_common {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    display: inline-block;
}

.icon_msg_sender {
    margin-right: 3px;
    margin-top: -2px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    /* background: url(../images/msg_tab_z25df2d.png) 0 -270px no-repeat; */
}

.weixin-btn-group {
    text-align: center;
    width: 100%;
    margin: 30px 0px;
    overflow: hidden;

    .btn {
        width: 100px;
        border-radius: 0px;
    }
}


#material-list {
    padding: 20px;
    overflow-y: scroll;
    height: 558px;

    table {
        width: 100%;
    }
}

#news-list {
    padding: 20px;
    overflow-y: scroll;
    height: 558px;
}

</style>